<template>
    <section class="p_tab">
		<p  class="topTab">
        <el-tag
		  :key="tag.name"
		  v-for="tag in dynamicTags"
		  closable
		  :disable-transitions="true"
		  :class ="{active:tag.active}"
		  @close="handleClose(tag.name)">
		  {{tag.name}}
		</el-tag>
		</p>
    </section>
</template>

<script>

    export default {
        data() {
          return {
          		 dynamicTags: [
	          		 {
	          		 	name:'首页',
	          		 	active:false,
	          		 },
	          		 {
	          		 	name:"日常事务",
	          		 	active:true
	          		 }
          		 ],
		         inputVisible: false,
		         inputValue: '',
          };
        },
        methods: {
        	  handleClose(tag) {
		        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
		      },
        }
  };
</script>

<style >
   .p_tab .el-tag + .el-tag {
    /*margin-left: 10px;*/
  }
  .p_tab .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .p_tab .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .p_tab .el-tag{
  	     border-radius: unset;
  	     background: unset;
  }
  .p_tab .topTab{
  	width: 98%;
		margin: 10px auto;
		background: #FFFFFF;
  }
  .p_tab .el-tag,.p_tab .el-tag .el-icon-close{
  	color: #545454;
  }
  .p_tab .el-tag.active,.p_tab .el-tag.active .el-icon-close{
  	color: #125AD2;
  }
</style>
